import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router' //引入创建路由
import Brother from '@/pages/Brother.vue' //组件
import Child from '@/pages/Child.vue'
import Father from '@/pages/Father.vue'
import GrandSon from '@/pages/GrandSon.vue'
import Uncle from '@/pages/Uncle.vue'

const router = createRouter({ //创建路由规则
    history: createWebHistory(), //路由器模式,history路径不带#,需后端配合nginx配置:try_files $uri $uri/ /index.html;
    //history: createWebHashHistory(), //hash路径带#
    routes: [
        {
            name: 'father', //命名路由
            path: '/fatherpath',
            component: Father,
            children: [ //嵌套路由(子路由)
                {
                    name: 'child',
                    path: 'childpath/:id/:title/:content?', //2级不用写斜杠,params传参占位,?可传可不传
                    component: Child,
                    //props: true, //1.将路由收到的所有params参数作为props传给理由组件
                    props(route) { //2.props函数返回query或params
                        return route.query
                        //return route.params
                    },
                    // props: { //3.props对象(参数写死了)
                    //     id: 1,
                    //     title: '标题'
                    // }
                    children: [ //嵌套路由(孙路由)
                        {
                            name: 'grandson',
                            path: '/grandsonpath',
                            component: GrandSon
                        }
                    ]
                },
                {
                    name: 'brother',
                    path: '/brotherpath',
                    component: Brother
                }
            ]
        },
        {
            name: 'uncle', //同级路由
            path: '/unclepath',
            component: Uncle
        },
        {
            path: '/', //默认路由
            redirect: '/fatherpath' //将/重定向到/fatherpath
        }
    ]
})
export default router //暴露出去